<script>
import UFormItem from "../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import URow from "../../../../../uni_modules/uview-ui/components/u-row/u-row.vue";
import {uploadFile} from "../../../../../static/utils/uploadImg";
import {AZIMUTH, AZIMUTH_VALUE_TO_LABEL, REPAYMENT_TYPE} from "../../../../../constant";
import UIcon from "../../../../../uni_modules/uview-ui/components/u-icon/u-icon.vue";
import uSelect from "../../../../../components/base/u-select/index.vue";
import imageUpload from "./../../../../../components/base/image-upload/index.vue";

export default {
  name: "index",
  computed: {
    REPAYMENT_TYPE() {
      return REPAYMENT_TYPE
    },
    AZIMUTH_VALUE_TO_LABEL() {
      return AZIMUTH_VALUE_TO_LABEL
    },
    AZIMUTH() {
      return AZIMUTH
    },
  },
  components: {uSelect, UIcon, URow, UFormItem, imageUpload},
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {}
  },
  methods: {}
}
</script>

<template>
  <view class="module">
    <view class="cell module__title">
      <view class="cell-hd">
        <u-icon name="order" size="22"></u-icon>
      </view>
      <view class="cell-bd module__title__text">房屋信息</view>
    </view>

    <u-form-item label="房屋结构" borderBottom>{{ formData.buildingStructure }}</u-form-item>
    <u-form-item label="主梁类型" borderBottom>{{ formData.kingpostType }}</u-form-item>
    <u-form-item label="房屋类型" borderBottom>{{ formData.houseType }}</u-form-item>
    <u-form-item label="屋顶类型" borderBottom>{{ formData.roofType }}</u-form-item>
    <u-form-item label="拍摄方式" borderBottom>{{ formData.shootType }}</u-form-item>
    <u-form-item
        label="禁飞图片"
        prop="formData.noFlyImgs"
        borderBottom
        ref="item1"
        required
        v-if="formData.shootType === '2'"
    >
      <view>
        <u-row :gutter="10">
          <u-col :span="4">
            <image-upload v-model="formData.noFlyImgs" disabled/>
          </u-col>
          <u-col :span="4">
            <image-upload v-model="formData.noFlyImgs1" style="margin-left: 10px" disabled/>
          </u-col>
          <u-col :span="4"></u-col>
        </u-row>
      </view>
    </u-form-item>
    <u-form-item
        label="屋顶照片"
        prop="formData.roofPhotoOne"
        borderBottom
        ref="item1"
        required
    >
      <view>
        <u-row :gutter="10">
          <u-col :span="4">
             <image-upload disabled v-model="formData.roofPhotoOne"/>
            <view class="roof-subtitle mb-10">俯拍图</view>
          </u-col>
          <u-col :span="4">
             <image-upload disabled v-model="formData.roofPhotoTwo"/>
            <view class="roof-subtitle mb-10">角度南</view>
          </u-col>
          <u-col :span="4">
             <image-upload disabled v-model="formData.roofPhotoThree"/>
            <view class="roof-subtitle mb-10">东南角</view>
          </u-col>
        </u-row>
        <u-row :gutter="10">
          <u-col :span="4">
             <image-upload disabled v-model="formData.roofPhotoFour"/>
            <view class="roof-subtitle">西南角</view>
          </u-col>
          <u-col :span="4">
             <image-upload disabled v-model="formData.roofPhotoInterior"/>
            <view class="roof-subtitle">房屋内部</view>
          </u-col>
          <u-col :span="4">
             <image-upload disabled v-model="formData.dimensionsPhotoThickness"/>
            <view class="roof-subtitle">楼顶厚度</view>
          </u-col>
        </u-row>
        <u-row :gutter="10">
          <u-col :span="4">
             <image-upload disabled v-model="formData.roofPhotoFive"/>
            <view class="roof-subtitle">补充</view>
          </u-col>
          <u-col :span="4">
             <image-upload disabled v-model="formData.roofPhotoSix"/>
            <view class="roof-subtitle">补充</view>
          </u-col>
          <u-col :span="4"></u-col>
        </u-row>
      </view>
    </u-form-item>
    <u-form-item
        label="屋顶视频"
        prop="formData.roofValue"
        borderBottom
        ref="item1"
        required
    >
       <image-upload disabled v-model="formData.roofValue" accept="video" />
    </u-form-item>
    <u-form-item
        label="房产证"
        prop="formData.houseOwnership"
        borderBottom
        ref="item1"
        required
    >
      <u-row :gutter="10">
        <u-col :span="4">
           <image-upload disabled v-model="formData.houseOwnership" />
        </u-col>
        <u-col :span="4">
           <image-upload disabled v-model="formData.houseOwnershipOne" />
        </u-col>
        <u-col :span="4">
           <image-upload disabled v-model="formData.houseOwnershipTwo" />
        </u-col>
      </u-row>
    </u-form-item>
    <u-form-item
        label="踏勘记录表"
        prop="formData.surveyRecord"
        borderBottom
        ref="item1"
        required
    >
      <u-row :gutter="10">
        <u-col :span="4">
           <image-upload disabled v-model="formData.surveyRecord" />
        </u-col>
        <u-col :span="4">
           <image-upload disabled v-model="formData.surveyRecord2" />
        </u-col>
        <u-col :span="4"></u-col>
      </u-row>
    </u-form-item>
    <u-form-item
        label="用户手持明白纸照片"
        prop="formData.whitePaperPhoto"
        borderBottom
        ref="item1"
        required
    >
       <image-upload disabled v-model="formData.whitePaperPhoto" />
    </u-form-item>
    <u-form-item
        label="备案文件"
        prop="formData.filingDocumentPhoto"
        borderBottom
        ref="item1"
    >
      <u-row :gutter="10">
        <u-col :span="4">
           <image-upload disabled v-model="formData.filingDocumentPhoto" />
        </u-col>
        <u-col :span="4">
           <image-upload disabled v-model="formData.filingDocumentPhoto2" />
        </u-col>
        <u-col :span="4">
           <image-upload disabled v-model="formData.filingDocumentPhoto3" />
        </u-col>
      </u-row>
    </u-form-item>
    <u-form-item label="并网距离">{{formData.distance}}米</u-form-item>
    <u-form-item label="方位角">{{AZIMUTH_VALUE_TO_LABEL[formData.azimuth]}} {{ formData.azimuth !== AZIMUTH.SOUTH ? formData.angle + '°' : '' }}</u-form-item>
    <u-form-item label="并网距离">{{formData.buildingHeight}}米</u-form-item>
    <u-form-item label="还款方式">{{REPAYMENT_TYPE[formData.repaymentMethod]}}</u-form-item>
    <u-form-item label="备注">{{formData.remarks}}</u-form-item>
  </view>
</template>

<style scoped lang="scss">
.module{
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px 20px 0px 20px;
  &:last-child{
    margin-bottom: 0px;
  }
  &__title{
    font-size: 16px;
    border-bottom: 1px solid #eee;
    color: #113d48;
    padding-bottom: 10px;
    &__text{
      margin-left: 5px;
    }
  }
}

.roof-subtitle{
  text-align: center;
  color: #888;
}
.mb-10{
  margin-bottom: 10px;
}
.ml-15{
  margin-left: 15px;
}
</style>
